<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>工业机器人订单下达</title>
    <meta name="author" content="DeathGhost" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="/mes/static/css/font-awesome.min.css" media="screen">
    <link rel="stylesheet" href="/mes/static/css/style.css" media="screen">
    <style>
        body{height:100%;
            width: 100%;
            background-color: white;
            overflow:hidden;
            position: relative;
        }
        #app{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        #all{
            height:100vh;
            margin-left:0;
            margin-right:0;
        }
    </style>
    <script type="text/javascript" src="/mes/static/js/jquery-3.3.1.min.js"></script>

<!--*****************************************************************-->
    <script src="/mes/static/js/vue.js"></script>
    <!--ajax方式请求后台-->
    <script src="/mes/static/js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/mes/js/index.css">
    <!-- 引入组件库 -->
    <script src="/mes/static/js/index.js"></script>
    <style lang="scss" scoped>
        .login-container {
            /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
            -webkit-border-radius: 5px;
            border-radius: 5px;
            -moz-border-radius: 5px;
            background-clip: padding-box;
            margin: 180px auto;
            width: 380px;
            padding: 0px 0px;
            background: #fff;
            border: 1px solid #eaeaea;
            box-shadow: 0 0 0px #cac6c6;}
        .title {
            margin: 0px auto 40px auto;
            text-align: center;
            color: #505458;
        }
        .remember {
            margin: 0px 0px 35px 0px;
        }
        .el-main{
            padding:0px;
        }
        canvas 	{ background-color:transparent; border: 2px solid deepskyblue; top: 0; left: 0; position:absolute;}
        canvas.resize-ne { cursor: ne-resize; }
        canvas.resize-se { cursor: se-resize; }
        canvas.resize-sw { cursor: sw-resize; }
        canvas.resize-nw { cursor: nw-resize; }
        canvas.move { cursor: move; }
        canvas.default { cursor: default; }
        .mini{width:380px; height:380px; margin:0px auto;}
    </style>

    <script type="text/javascript" src="/mes/static/js/fabric.js"></script>
    <script type="text/javascript" src="/mes/static/js/layer.js"></script>

</head>
<body>
<div id="app">
            <el-tabs v-model="activeName" type="border-card" @tab-click="showPage" style="height: 98%">
                <el-tab-pane label="汽车模型" name="first" :key="first">
                    <el-form v-if="isFirst" ref="formName" :model="form" label-width="80px" :rules="rules" style="font-size:1.2em">
                        <el-form-item label="订单号" prop="m_szOrderID">
                            <el-input v-model="form.m_szOrderID" readonly="true"></el-input>
                        </el-form-item>
                        <el-form-item label="订单名称" prop="m_szOrderName">
                            <el-input v-model="form.m_szOrderName" placeholder="请输入内容" maxlength="15" show-word-limit ></el-input>
                        </el-form-item>
                        <el-form-item label="下单时间" prop="m_szOrderID">
                            <el-input v-model="form.m_szCreateTime" readonly="true"></el-input>
                        </el-form-item>
                        <el-form-item label="订单数量" prop="m_iOrderQty">
                            <el-input type="number" v-model.number="form.m_iOrderQty" placeholder="请输入一个正整数" maxlength="5"></el-input>
                        </el-form-item>
                        <el-form-item label="物料信息" prop="m_iProduction">
                            <el-switch
                                    v-model="valueOne"
                                    inactive-text="默认"
                                    disabled>
                            </el-switch>
                        </el-form-item>
                        <el-form-item label="生产模式" prop="m_iOrderMode">
                            <el-radio-group v-model="form.m_iOrderMode">
                                <el-radio :label="0">实训模式</el-radio>
                                <el-radio :label="1">实战模式</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="备注信息" prop="m_szOrderNote">
                            <el-input type="textarea" :rows="4" v-model="form.m_szOrderNote"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">立即创建</el-button>
                            <el-button @click="resetForm('formName')">清空</el-button>
                        </el-form-item>
                    </el-form>

                </el-tab-pane>
                <el-tab-pane label="惰轮" name="second" :key="second">
                    <el-form v-if="isSecond" ref="formName" :model="form" label-width="80px" :rules="rules" style="font-size:1.2em">
                        <el-form-item label="订单号" prop="m_szOrderID">
                            <el-input v-model="form.m_szOrderID" readonly="true"></el-input>
                        </el-form-item>
                        <el-form-item label="订单名称" prop="m_szOrderName">
                            <el-input v-model="form.m_szOrderName" placeholder="请输入内容" maxlength="15" show-word-limit ></el-input>
                        </el-form-item>
                        <el-form-item label="下单时间" prop="m_szCreateTime">
                            <el-input v-model="form.m_szCreateTime" readonly="true"></el-input>
                        </el-form-item>
                        <el-form-item label="订单数量" prop="m_iOrderQty">
                            <el-input type="number" v-model.number="form.m_iOrderQty" placeholder="请输入一个正整数" maxlength="5"></el-input>
                        </el-form-item>
                        <el-form-item label="物料信息" prop="m_iProduction">
                            <el-switch
                                    v-model="valueOne"
                                    inactive-text="默认"
                                    disabled>
                            </el-switch>
                        </el-form-item>
                        <el-form-item label="生产模式" prop="m_iOrderMode">
                            <el-radio-group v-model="form.m_iOrderMode">
                                <el-radio disabled :label="0">实训模式</el-radio>
                                <el-radio disabled :label="1">实战模式</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="备注信息" prop="m_szOrderNote">
                            <el-input type="textarea" :rows="4" v-model="form.m_szOrderNote"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">立即创建</el-button>
                            <el-button @click="resetForm('formName')">清空</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="图章" name="third" :key="third">
                    <el-form v-if="isThird" ref="formName" :model="form" label-width="80px" :rules="rules" style="font-size:1.2em">
                        <el-form-item label="订单号" prop="m_szOrderID">
                            <el-input v-model="form.m_szOrderID" readonly="true"></el-input>
                        </el-form-item>
                        <el-form-item label="订单名称" prop="m_szOrderName">
                            <el-input v-model="form.m_szOrderName" placeholder="请输入内容" maxlength="15" show-word-limit ></el-input>
                        </el-form-item>
                        <el-form-item label="下单时间" prop="m_szCreateTime">
                            <el-input v-model="form.m_szCreateTime" readonly="true"></el-input>
                        </el-form-item>
                        <el-form-item label="订单数量" prop="m_iOrderQty">
                            <el-input type="number" v-model.number="form.m_iOrderQty" placeholder="请输入一个正整数" maxlength="5"></el-input>
                        </el-form-item>
                        <el-form-item label="物料信息" prop="m_iProduction">
                            <el-radio-group v-model="form.m_iProduction">
                                <el-radio :label="0">从立体库中取</el-radio>
                                <el-radio :label="1">从3D打印机取</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="生产模式" prop="m_iOrderMode">
                            <el-radio-group v-model="form.m_iOrderMode">
                                <el-radio :label="0">实训模式</el-radio>
                                <el-radio :label="1">实战模式</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="备注信息" prop="m_szOrderNote">
                            <el-input type="textarea" :rows="4" v-model="form.m_szOrderNote"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">立即创建</el-button>
                            <el-button @click="resetForm('formName')">清空</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="七巧板" name="forth" :key="forth">
                            <el-col :span="12">
                                <el-form v-if="isForth" ref="formName" :model="form" label-width="80px" :rules="rules" style="font-size:1.2em">
                                    <el-form-item label="订单号" prop="m_szOrderID">
                                        <el-input v-model="form.m_szOrderID" readonly="true"></el-input>
                                    </el-form-item>
                                    <el-form-item label="订单名称" prop="m_szOrderName">
                                        <el-input v-model="form.m_szOrderName" placeholder="请输入内容" maxlength="15" show-word-limit ></el-input>
                                    </el-form-item>
                                    <el-form-item label="下单时间" prop="m_szCreateTime">
                                        <el-input v-model="form.m_szCreateTime" readonly="true"></el-input>
                                    </el-form-item>
                                    <el-form-item label="订单数量" prop="m_iOrderQty">
                                        <el-input type="number" v-model.number="form.m_iOrderQty" placeholder="请输入一个正整数" maxlength="5"></el-input>
                                    </el-form-item>
                                    <el-form-item label="物料信息" prop="m_iProduction">
                                        <el-switch
                                                v-model="valueTwo"
                                                active-text="坐标值"
                                                disabled>
                                        </el-switch>
                                    </el-form-item>
                                    <el-form-item label="生产模式" prop="m_iOrderMode">
                                        <el-radio-group v-model="form.m_iOrderMode">
                                            <el-radio disabled :label="0">实训模式</el-radio>
                                            <el-radio disabled :label="1">实战模式</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item label="备注信息" prop="m_szOrderNote">
                                        <el-input type="textarea" :rows="4" v-model="form.m_szOrderNote"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="onSubmit">立即创建</el-button>
                                        <el-button @click="resetForm('formName')">清空</el-button>
                                    </el-form-item>
                                </el-form>
                            </el-col>
                            <el-col :span="12">
                                <table style="width: 100%;">
                                    <tr>
                                        <td>
                                            <div id="apDiv2leftH" style="text-align: center;margin-bottom: 5px">
                                                <input type="text" name="userName" id="edit_userName" class="text" readonly style="border:0px solid red;" />
                                                <br/>
                                                <div id="my_painter" class="mini">
                                                    <canvas id="canvid1" tabindex="0" width="380" height="380">
                                                    </canvas>
                                                </div>
                                            </div>
                                            <div id="apDiv2rightH" style="text-align: center;margin-top: 5px">
                                                <input type="text" name="status" id="edit_status" class="text" style="display:none"/>
                                                <el-input type="text" id="resLabel" style="width:74%;padding-left: 13%;padding-right: 13%" v-model="resLabel" readonly="true"></el-input>
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </el-col>
                </el-tab-pane>
            </el-tabs>
</div>
<!--***************************************************-->

<script type="text/javascript" src="/mes/static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/mes/static/js/respond.min.js"></script>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            activeName:'first',
            valueOne:false,
            valueTwo:true,
            valueThreeA:true,
            valueThreeB:false,
            isFirst:true,
            isSecond:false,
            isThird:false,
            isForth:false,
            resLabel:'',
            form: {
                m_szOrderID: '',
                m_szOrderName: '',
                m_szCreateTime: '',
                m_iOrderQty: 1,
                m_iMaterialFlag: 1,
                m_iProduction:0,
                m_iProductionMessage:'',
                m_iOrderMode: 0,
                m_szOrderNote: '',
                userName:'',
                userId:0
            },
            rules:{
                m_szOrderName: [
                    { required: true, message: '订单名称不能为空', trigger: 'blur'},
                ],
                m_iOrderQty: [
                    { required: true, pattern:/^\+?[1-9][0-9]*$/, message: '请输入一个正整数', change: 'blur'},
                ]
            }
        },
        created:function () {
            let now = new Date();
            let year = now.getFullYear(); //年
            let month = now.getMonth() + 1; //月
            let day = now.getDate(); //日
            let hh = now.getHours(); //时
            let mm = now.getMinutes(); //分
            let ss = now.getSeconds(); //秒
            let clock = year + "";
            if (month < 10) clock += "0";
            clock += month + "";
            if (day < 10) clock += "0";
            clock += day + "";
            if (hh < 10) clock += "0";
            clock += hh + "";
            if (mm < 10) clock += '0';
            clock += mm + "";
            if (ss < 10) clock += '0';
            clock += ss;
            hh < 10 ? hh = "0" + hh : hh;
            mm < 10 ? mm = "0" + mm : mm;
            ss < 10 ? ss = "0" + ss : ss;
            this.form.m_szOrderID=clock;
            this.form.m_szCreateTime=year+"-"+month+"-"+day+" "+hh+":"+mm+":"+ss;
        },
        methods: {
            currentTime() {
                let now = new Date();
                let year = now.getFullYear(); //年
                let month = now.getMonth() + 1; //月
                let day = now.getDate(); //日
                let hh = now.getHours(); //时
                let mm = now.getMinutes(); //分
                let ss = now.getSeconds(); //秒
                let clock = year + "";
                if (month < 10) clock += "0";
                clock += month + "";
                if (day < 10) clock += "0";
                clock += day + "";
                if (hh < 10) clock += "0";
                clock += hh + "";
                if (mm < 10) clock += '0';
                clock += mm + "";
                if (ss < 10) clock += '0';
                clock += ss;
                return (clock);
            },
            nowTime(){
                let now = new Date();
                let year = now.getFullYear(); //年
                let month = now.getMonth() + 1; //月
                let day = now.getDate(); //日
                let hh = now.getHours(); //时
                let mm = now.getMinutes(); //分
                let ss = now.getSeconds(); //秒
                //检查是否小于10
                hh=vm.check(hh);
                mm=vm.check(mm);
                ss=vm.check(ss);
                let clock = year+"-"+month+"-"+day+" "+hh+":"+mm+":"+ss;
                return (clock);
            },
            //获取登录信息
            getLoginInfo:function(){
                axios.post("getLoginInfo")
                    .then(function (response) {
                        vm.resetForm('form');
                        vm.form.userName=response.data.name;
                        vm.form.userId=response.data.userId;
                    })
            },
            //时间数字小于10，则在之前加个“0”补位。
            check(i) {
                //方法一，用三元运算符
                var num;
                i < 10 ? num = "0" + i : num = i;
                return num;

                //方法二，if语句判断
                //if(i<10){
                //    i="0"+i;
                //}
                //return i;
            },
            showPage(tab){
                vm.resetForm('formName');
                vm.form.m_szOrderID=this.currentTime();
                vm.form.m_szCreateTime=this.nowTime();
                if (tab.name==='second'){
                    vm.isFirst=false;
                    vm.isThird=false;
                    vm.isForth=false;
                    vm.isSecond=true;
                    vm.form.m_iOrderMode=1;
                    vm.form.m_iMaterialFlag=1;

                }
                if (tab.name==='third'){
                    vm.isFirst=false;
                    vm.isThird=true;
                    vm.isForth=false;
                    vm.isSecond=false;
                    vm.form.m_iMaterialFlag=2;

                }
                if (tab.name==='forth'){
                    vm.isFirst=false;
                    vm.isThird=false;
                    vm.isForth=true;
                    vm.isSecond=false;
                    vm.form.m_iOrderMode=1;
                    vm.form.m_iMaterialFlag=0;


                    window.add
                    var part1;
                    var part2;
                    var part3;
                    var part4;
                    var part5;
                    var part6;
                    var part7;
                    var part8;
                    var angle = new Array();
                    var canvas = this.__canvas = new fabric.Canvas('canvid1');
                    fabric.Object.prototype.transparentCorners = true;
                    fabric.Object.prototype.borderColor = 'rgba(255,0,0,1.0)';
                    fabric.Object.prototype.hasBorders = true;
                    fabric.Object.prototype.cornerColor = 'rgba(255,0,0,1.0)';
                    fabric.Object.prototype.cornerSize = 15;
                    angle[0] = 0;
                    angle[1] = 0;
                    angle[2] = 0;
                    angle[3] = 0;
                    angle[4] = 0;
                    angle[5] = 0;
                    angle[6] = 0;
                    angle[7] = 0;

                    part1 = new fabric.Triangle({
                        width: 64, height: 32, left: 280-31, top: 113-15.5,
                        fill: 'rgba(132, 0, 132,1.0)'
                    });
                    part1.angle = 0;

                    part2 = new fabric.Triangle({
                        width: 92, height: 46, left: 96-31, top: 180-15.5,
                        fill: 'rgba(255, 128, 255,1.0)'
                    });
                    part2.angle = 0;
                    part3 = new fabric.Rect({
                        width: 46, height: 46, left: 144-62.5, top: 181-31.25,
                        fill: 'rgba(0, 255, 0,1.0)',
                        centerdScaling:true
                    });
                    part3.angle = 0;
                    part4 = new fabric.Triangle({
                        width: 128, height:64,left:  323-62.5, top: 178-31.25, fill: 'rgba(255, 255, 0,1.0)'
                    });
                    part4.angle = 0;
                    part5 = new fabric.Triangle({
                        width: 128, height: 64, left: 170-22.5, top: 77-22.5, fill: 'rgba(102, 0, 0,1.0)'
                    });
                    part5.angle = 0;
                    //width：92,height：32
                    part6 = new fabric.Polygon([{x:64,y:245},{x:96,y:216},{x:96,y:155},{x:64,y:184}],{fill:'rgba(0, 0, 255,1.0)'});
                    part6.angle = 0;

                    part7 = new fabric.Triangle({
                        width: 64, height: 32, left: 152-44, top: 216-22.5,
                        fill: 'rgba(255, 0, 0,1.0)'
                    });
                    part7.angle = 0;
                    part8 = new fabric.Polygon([{x:24,y:216},{x:56,y:245},{x:56,y:184},{x:24,y:155}],{fill:'rgba(255, 255, 0,1.0)'});
                    canvas.add(part1, part2, part3, part4, part5,part6,part7);
                    canvas.on({
                        'object:moving': onChange,
                        'object:scaling': onChange,
                        'object:rotating': onChange,
                    });
                    var res = document.getElementById("resLabel");
                    onChange(part7);
                    function onChange(options) {

                        if(part1.angle>180)
                        {
                            angle[0] = 360-part1.angle;
                        }
                        else
                        {
                            angle[0] = -part1.angle;
                        }
                        if(part2.angle>180)
                        {
                            angle[1] = 360-part2.angle;
                        }
                        else
                        {
                            angle[1] = -part2.angle;
                        }
                        if(part3.angle>180)
                        {
                            angle[2] = 360-part3.angle;
                        }
                        else
                        {
                            angle[2] = -part3.angle;
                        }
                        if(part4.angle>180)
                        {
                            angle[3] = 360-part4.angle;
                        }
                        else
                        {
                            angle[3] = -part4.angle;
                        }
                        if(part5.angle>180)
                        {
                            angle[4] = 360-part5.angle;
                        }
                        else
                        {
                            angle[4] = -part5.angle;
                        }
                        if(part6.angle>180)
                        {
                            angle[5] = 360-part6.angle;
                        }
                        else
                        {
                            angle[5] = -part6.angle;
                        }
                        if(part7.angle>180)
                        {
                            angle[6] = 360-part7.angle;
                        }
                        else
                        {
                            angle[6] = -part7.angle;
                        }

                        res.value = parseInt(part1.getCenterPoint().x)+","+parseInt(part1.getCenterPoint().y)+","+parseInt(angle[0])
                            +"||"+parseInt(part2.getCenterPoint().x)+","+parseInt(part2.getCenterPoint().y)+","+parseInt(angle[1])
                            +"||"+parseInt(part3.getCenterPoint().x)+","+parseInt(part3.getCenterPoint().y)+","+parseInt(angle[2])
                            +"||"+parseInt(part4.getCenterPoint().x)+","+parseInt(part4.getCenterPoint().y)+","+parseInt(angle[3])
                            +"||"+parseInt(part5.getCenterPoint().x)+","+parseInt(part5.getCenterPoint().y)+","+parseInt(angle[4])
                            +"||"+parseInt(part6.getCenterPoint().x)+","+parseInt(part6.getCenterPoint().y)+","+parseInt(angle[5])
                            +"||"+parseInt(part7.getCenterPoint().x)+","+parseInt(part7.getCenterPoint().y)+","+parseInt(angle[6]);

                        canvas.forEachObject(function(obj) {
                        });
                        //
                    }
                }
                if (tab.name==='first'){
                    vm.isFirst=true;
                    vm.isThird=false;
                    vm.isForth=false;
                    vm.isSecond=false;
                    vm.form.m_iMaterialFlag=3;
                    document.getElementById("resLabel").value="";
                    vm.resLabel="";
                }
            },
            aChange:function(valueThreeA){
                console.log(valueThreeA);
                if (!valueThreeA){
                    vm.form.m_iProduction=1;
                }else{
                    vm.form.m_iProduction=0;
                }
            },
            //表格重置
            resetForm(formName) {
                this.$refs[formName].resetFields();
                vm.form.m_szOrderID=this.currentTime();
                vm.form.m_szCreateTime=this.nowTime();
                vm.form.m_iProduction=0;
                vm.form.m_iOrderMode=0;
                vm.form.m_iProductionMessage="";
                vm.resLabel="";
            },
            onSubmit(formName) {

                this.$refs['formName'].validate((valid) => {
                    if (valid) {
                        if (vm.form.m_iMaterialFlag==0){
                            vm.form.m_iProductionMessage=document.getElementById("resLabel").value;
                        }
                        vm.getLoginInfo();
                        axios.post('/mes/cstm/addOrders',vm.form)
                            .then(function (value) {
                                if (value.data.resultStatus==1){
                                    vm.complete(value.data.message);
                                }else {
                                    vm.error(value.data.message);
                                }
                                vm.resetForm('formName');
                            })
                            .catch(function (error) {
                                console.log(error);
                            });

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            complete:function(msg) {
                this.$notify({
                    title: '成功',
                    message: msg,
                    type:'success'
                });
            },
            error:function(msg) {
                this.$notify.error({
                    title: '错误',
                    message: msg
                });
            },
        }
    })
</script>

</html>
